<template>
	<page-meta :page-style="'overflow:' + (isShowPopup ? 'hidden' : 'visible')"></page-meta>
	<view class="page-container bg-grey" v-if="districtData.id">
		<up-navbar
			safeAreaInsetTop
			fixed
			:bgColor="navbarcfg.bgColor"
			@left-click="pageBack"
			:title="navbarcfg.title"
		></up-navbar>

		<zjy-sticky-tab
			:tabs="tabs"
			:scrollTop="scrollTopVal"
			v-model="showStickyTab"
			:flex="true"
			ref="onTabRef"
		></zjy-sticky-tab>

		<!-- 轮播 -->
		<view class="carousel">
			<up-swiper
				:autoplay="false"
				height="668rpx"
				:current="currentSwiperIndex"
				:list="districtData.bg_urls"
				@change="changeSwiper"
				indicatorStyle="right:24rpx; bottom: 88rpx"
			>
				<!-- 图片内容插槽 -->
				<template #default="{ item, index }">
					<view class="swiper-item">
						<image :src="item" class="swiper-image" mode="aspectFill"></image>
						<!-- 标题和宣传语 -->
						<view class="swiper-title">
							<view class="title">
								<text class="text">{{ districtData.dest_name }}</text>
								<image :src="`${imgBaseUrl}title-bg-icon2.png`" class="title-bg" />
							</view>
							<view class="subtitle text-ellipsis fs-28 mt-8">"{{ districtData.intro }}"</view>
						</view>
					</view>
				</template>
				<template #indicator>
					<view class="indicator-num">
						<text class="indicator-num__text">
							{{ currentSwiperIndex + 1 }}/{{ districtData.bg_urls.length }}
						</text>
					</view>
				</template>
			</up-swiper>
		</view>
		<!-- 介绍 -->
		<view id="order-product" class="order-product">
			<!-- 景区信息 -->
			<view class="scenic-info card-content pb-32">
				<view class="mb-24 flex-a">
					<image :src="`${imgBaseUrl}introduce-icon.png`" class="icon-36 mr-8" />
					<text class="fs-36 font-600">恩施介绍</text>
				</view>
				<view class="pb-16">
					<up-parse :content="districtData.description" @ready="ready" lazyLoad="false"></up-parse>
				</view>
			</view>
		</view>
		<!-- 玩什么 -->
		<view id="play-content" class="card-content">
			<view class="flex-a">
				<image :src="`${imgBaseUrl}play-icon.png`" class="icon-36 mr-8" />
				<text class="fs-36 font-600">玩什么</text>
			</view>

			<view class="play-content-wrapper">
				<view v-for="item in districtData.resorts" :key="item.id">
					<resort-list-card :data="item"></resort-list-card>
				</view>
				<!--				<view class="get-more">
					<view class="get-more-btn flex-c" @click="isShowMore = !isShowMore">
						<text class="pr-4">查看全部</text>
						<up-icon name="arrow-down" size="12"></up-icon>
					</view>
				</view>-->
			</view>
		</view>
		<!--怎么玩-->
		<view id="notes" class="gradient-wrap card-content">
			<view class="flex-a pb-24">
				<image :src="`${imgBaseUrl}howPlay-icon.png`" class="icon-36 mr-8" />
				<text class="fs-36 font-600">怎么玩</text>
			</view>
			<view class="notes-content">
				<waterfall :listData="waterFallList" v-if="waterFallList.length > 0"></waterfall>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad, onPageScroll } from "@dcloudio/uni-app"
import useCommonStore from "@/store/common"
import immersiveNavbar from "@/mixins/immersive-navbar"
import { pageBack, pageToScenicDetail } from "@/utils/page-redirect"
import { $getPublicityDetail, $getScenicProductList } from "@/api/hy/scenic"
import { today } from "@/utils/tools"
import { needLogin } from "@/utils/users"
import ResortListCard from "@/pages/hy/components/resort-list-card.vue"
import Waterfall from "@/pages/hy/district/components/waterfall.vue"
import ZjyStickyTab from "@/components/zjy-sticky-tab.vue"
import { throttle } from "lodash"
const { statusBarHeight, navbarHeight } = useCommonStore()
const imgBaseUrl = inject("imgBaseUrl")
const tourDate = ref(today())
const id = ref("")
const districtData = ref<any>({})
const tabs = [
	{ id: "order-product", name: "介绍" },
	{ id: "play-content", name: "景区" },
	{ id: "notes", name: "笔记" },
]

const showStickyTab = ref(false)
const waitTimeout = ref(true)
const onTabRef = ref(null)
const isShowPopup = computed(() => {
	return waitTimeout.value
})
// 倒计时不让页面滚动
setTimeout(() => {
	waitTimeout.value = false
}, 2000)
const ready = () => {
	waitTimeout.value = false
	if (onTabRef.value) onTabRef.value.calculateTabPositions()
}

const waterFallList = ref([
	{
		id: 1,
		name: "酒店豪华榜",
		type: 20,
		cover_url: "https://oiz.zhijingyou.com/staging-upload/2024/lvapps/1731641029-533037491085696.jpg",
		intro: "介绍------------------",
		author: "作者",
	},
	{
		id: 2,
		name: "线路榜单2",
		type: 20,
		cover_url: "https://oiz.zhijingyou.com/staging-upload/2024/lvapps/1730949517-532993234506432.jpg",
		intro: "介绍222222222222------------------",
		author: "小凤漫游记",
	},
	{
		id: 4,
		name: "线路榜单3",
		type: 20,
		cover_url: "https://oiz.zhijingyou.com/staging-upload/2024/lvapps/1730949517-532993234506432.jpg",
		intro: "介绍222222222222------------------",
		author: "刺客伍六七",
	},
	{
		id: 5,
		name: "线路榜单4",
		type: 20,
		cover_url: "https://oiz.zhijingyou.com/staging-upload/2024/lvapps/1730949517-532993234506432.jpg",
		intro: "介绍222222222222------------------",
		author: "梅花十三",
	},
])
// 轮播
const currentSwiperIndex = ref(0)
const changeSwiper = (e: any) => {
	if (e.source == "autoplay" || e.source == "touch") {
		currentSwiperIndex.value = e.current
	}
}

// 分类数据
// ScenicBusinessTypes
const businessTypes = ref([])
const productList = ref([])
// 当前选中的分类索引
const currentIndex = ref(0)
// 当前要滚动到的元素ID
const currentItemId = ref("ticket-0")

const getScenicProductListData = async () => {
	$getScenicProductList(id.value, { tour_date: tourDate.value }).then((res: any) => {
		productList.value = res.list
		businessTypes.value = res.list.map((item: any) => item.business_type_name)

		nextTick(() => {})
	})
}

onLoad(async (option: any) => {
	id.value = option.id

	needLogin()

	districtData.value = await $getPublicityDetail(id.value)
	if (districtData.value.phones) {
		districtData.value["phone_list"] = districtData.value.phones.map((item: any) => {
			return {
				name: item,
			}
		})
	}

	await getScenicProductListData()
})

// 滚动位置
let { navbarcfg, pageTitle, pageScroll } = immersiveNavbar()
const scrollTopVal = ref(0)
onPageScroll(
	throttle((e: any) => {
		let scrollTop = e.scrollTop
		scrollTopVal.value = scrollTop
		pageScroll(scrollTop)
		pageTitle.value = districtData.value.dest_name
		if (navbarcfg.value.show) {
			showStickyTab.value = true
		} else {
			showStickyTab.value = false
		}
	}, 300)
)
</script>

<style scoped lang="scss">
.page-container {
	.carousel {
		position: relative;
		.indicator-num {
			padding: 6rpx 14rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 24px;
			display: flex;

			&__text {
				color: $c-white;
				font-size: 20rpx;
			}
		}
		.swiper-item {
			position: relative;
			.swiper-image {
				width: 100vw;
				height: 800rpx;
			}
			.swiper-title {
				position: absolute;
				bottom: 140rpx;
				left: 0;
				right: 0;
				padding: 24rpx 120rpx 0rpx 24rpx;
				color: #ffffff;
				height: 236rpx;
				width: 100%;
				background: linear-gradient(
					360deg,
					rgba(0, 0, 0, 0) 0%,
					rgba(0, 0, 0, 0.3) 31%,
					rgba(0, 0, 0, 0.5) 61%,
					rgba(0, 0, 0, 0) 100%
				);
				.title {
					position: relative;
					.text {
						position: absolute;
						font-size: 64rpx;
						font-weight: 600;
						width: 100%;
						z-index: 2;
					}
					.title-bg {
						position: relative;
						top: 28rpx;
						left: 120rpx;
						width: 100rpx;
						height: 76rpx;
					}
				}
				.subtitle {
					opacity: 0.8;
				}
			}
		}
	}

	.order-product {
		width: 100%;
		position: relative;
		z-index: 2;
		margin-top: -32rpx;
		border-radius: 16rpx;
		margin-bottom: 16rpx;

		.scenic-info {
			display: flex;
			flex-direction: column;
			border-radius: 32rpx 32rpx 0 0;
		}
	}

	.card-content {
		margin-bottom: 16rpx;
		background-color: #ffffff;
		padding: 32rpx 24rpx 0;
		border-radius: 12rpx;
	}
	.get-more {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.get-more-btn {
			width: 164rpx;
			height: 64rpx;
			border-radius: 60rpx;
			border: 2rpx solid #e5e6eb;
		}
	}
}

.gradient-wrap {
	background: linear-gradient(to bottom, #ffffff, #f1f2f5);
	border-top-left-radius: 16rpx;
	border-top-right-radius: 16rpx;
}
</style>
